import 'package:ati_package/core/extension/ati_widgets_extension.dart';
import 'package:ati_package/core/utils/ati_color.dart';
import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import '../../../../core/utils/ati_assets.dart';

class TrendHeaderWidget extends StatelessWidget {
  final String backgroundUrl;
  final String avatarUrl;
  final String username;
  final String signature;
  final VoidCallback? onEdit;
  final VoidCallback? onChangeAvatar;
  final VoidCallback? onChangeBackground;
  final bool? isMyTrend;

  const TrendHeaderWidget({
    super.key,
    required this.backgroundUrl,
    required this.avatarUrl,
    required this.username,
    required this.signature,
    this.onEdit,
    this.onChangeAvatar,
    this.onChangeBackground,
    this.isMyTrend = false,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 16.r, top: 16.r, right: 16.r),
      clipBehavior: Clip.antiAlias,
      decoration: BoxDecoration(
        color: AtiColor.pageColor,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20.r),
          topRight: Radius.circular(20.r),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 8,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Column(
        children: [
          /// 顶部背景区域
          Stack(
            children: [
              /// 背景图
              CachedNetworkImage(
                imageUrl: backgroundUrl,
                height: (Get.width - 36) * 0.62,
                width: double.infinity,
                fit: BoxFit.cover,
                placeholder: (context, url) =>
                    Container(color: Colors.grey[200]),
                errorWidget: (context, url, error) =>
                    const Icon(Icons.broken_image),
              ),

              /// 右上角操作按钮
              if (isMyTrend == false)
                Positioned(
                  top: 16.r,
                  right: 16.r,
                  child: Row(
                    children: [
                      _iconBtn(AtiAssets.trendPictureIcon, onChangeBackground),
                      // _iconBtn(Icons.camera_alt_outlined, onChangeAvatar),
                    ],
                  ),
                ),

              /// 头像 + 名称
              Positioned.fill(
                top: 80.r,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    CircleAvatar(
                      radius: 45.r,
                      backgroundColor: Colors.white,
                      child: CircleAvatar(
                        radius: 42.5.r,
                        backgroundImage: CachedNetworkImageProvider(avatarUrl),
                      ),
                    ),
                    const SizedBox(height: 8),
                    Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 16,
                        vertical: 6,
                      ),
                      decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.6),
                        borderRadius: BorderRadius.circular(20),
                      ),
                      child: Text(
                        username,
                        style: const TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),

          const SizedBox(height: 12),

          /// 个性签名
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                signature,
                maxLines: 2,
                textAlign: TextAlign.center,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 14, color: Colors.grey[700]),
              ),
              Spacer(),
              if (isMyTrend == false)
                Image.asset(
                  width: 24.r,
                  height: 24.r,
                  AtiAssets.trendEditIcon,
                  package: 'ati_package',
                ).addTapGesture(onTap: onEdit ?? () {}),
            ],
          ),

          SizedBox(height: 5.r),

          /// 编辑按钮
        ],
      ),
    );
  }

  /// 小圆形按钮封装
  Widget _iconBtn(String imageStr, VoidCallback? onTap) {
    return Container(
      width: 23.r,
      height: 20.r,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(imageStr, package: 'ati_package'),
          fit: BoxFit.fitWidth,
        ),
      ),
      child: null,
    ).addTapGesture(onTap: onTap ?? () {});
  }
}
